<!--
  * 主应用页面 
-->

<template>
  <a-config-provider :locale="antdLocale" :theme="themeSetting">
    <!---全局loading--->
    <a-spin  :spinning="spinning" tip="稍等片刻，我在拼命加载中..." size="large">
      <!--- 路由 -->
      <RouterView class="app-box"/>
    </a-spin>
  </a-config-provider>
</template>

<script setup>
  import { theme } from 'ant-design-vue';
  import { computed } from 'vue';  
  import { useSpinStore } from '@/store/modules/spin';
  import { themeColors } from '@/constants/color.js';
  import {APP_CONFIG} from '@/constants/system-const'
  import dayjs from 'dayjs';
  import dayjsLocal from 'dayjs/locale/zh-cn';
  import antdLocale from 'ant-design-vue/es/locale/zh_CN';
  dayjs.locale(dayjsLocal);
  // 全局loading
  let spinStore = useSpinStore();
  const spinning = computed(() => spinStore.loading);
  // 是否紧凑
  const compactFlag = APP_CONFIG.compactFlag;
  // 主题颜色
  const colorIndex = APP_CONFIG.colorIndex;
  // 圆角
  const borderRadius = APP_CONFIG.borderRadius;
  const themeSetting = {
      algorithm: compactFlag ? theme.compactAlgorithm : theme.defaultAlgorithm,
      token: {
        colorPrimary: themeColors[colorIndex].primaryColor,
        colorLink: themeColors[colorIndex].primaryColor,
        colorLinkActive: themeColors[colorIndex].activeColor,
        colorLinkHover: themeColors[colorIndex].hoverColor,
        colorIcon: themeColors[colorIndex].primaryColor,
        borderRadius: borderRadius,
      },
      components: {
        Button: {
          colorLink: themeColors[colorIndex].primaryColor,
          colorLinkActive: themeColors[colorIndex].activeColor,
          colorLinkHover: themeColors[colorIndex].hoverColor,
        },
        Icon: {
          colorIcon: themeColors[colorIndex].primaryColor,
        },
      },
  }
  document.title = APP_CONFIG.websiteName;
</script>
